import http from "@/component/http";
import { Pagination, Popover, Table } from "antd";
import { ColumnsType } from "antd/lib/table";
import Tabs from "antd/lib/tabs";
import { FC, useCallback, useEffect, useState } from "react";
import { RouteComponentProps, withRouter } from "react-router-dom";

import "./index.scss";
import Rejection from "./modal/rejection";
const { TabPane } = Tabs;

/* 
客户认证
*/
const CustomerCertification: FC<RouteComponentProps> = (props) => {
  const [activeKey, setActiveKey] = useState("1");
  const [out, setOut] = useState(false);
  const [data, setData] = useState([
    {
      goodNo: "N202006010023",
      conpanyName: "Apple手机",
      type: "电商、线下",
      status: "待处理",
      conpanyId: "SY123123123123123",
      account: "4622",
      contacts: "库克",
      phone: "18080808080",
      category: "手机、电脑",
      address: "北京市海淀区法华寺21312号",
    },
  ]);
  const [pageInfo, setPageInfo] = useState({
    totalSize: 1,
    pageSize: 1,
    pageNo: 1,
    pages: 1,
  });

  const getData = useCallback(() => {
    const params = {
      type: activeKey,
      pageSize: pageInfo.pageSize,
      pageNo: pageInfo.pageNo,
    };
    http.get("customer/certification/getData.json", params).then((res: any) => {
      if (res.resCode === "000000") {
        const { data, totalSize, pageSize, pageNo, pages } = res.resRecord;
        setData(data);
        setPageInfo({ totalSize, pageSize, pageNo, pages });
        if (activeKey === "2") {
          const copyData = data.filter((item: any) => {
            return item.status === "1";
          });
          setData(copyData);
        }
        if (activeKey === "3") {
          const copyData = data.filter((item: any) => {
            return item.status === "2";
          });
          setData(copyData);
        }
      }
    });
  }, [activeKey, pageInfo.pageNo, pageInfo.pageSize]);

  useEffect(() => {
    getData();
  }, [getData]);

  const onShowSizeChange = (pageNo: number) => {
    const copyPageInfo = {
      ...pageInfo,
      pageNo,
    };
    setPageInfo(copyPageInfo);
    getData();
  };

  const toDetail = () => {
    props.history.push("/customerManagement/customerCertification/detail");
  };

  const columns: ColumnsType<any> | undefined = [
    {
      title: "序号",
      key: "id",
      dataIndex: "id",
      width: 60,
      render: (_, x, index) =>
        (pageInfo.pageNo - 1) * (pageInfo.pageSize - 1) + index + 1,
    },
    {
      title: "编号",
      key: "goodNo",
      dataIndex: "goodNo",
      width: 150,
    },
    {
      title: "公司名称",
      key: "conpanyName",
      dataIndex: "conpanyName",
    },
    {
      title: "经营类型",
      key: "type",
      dataIndex: "type",
    },
    {
      title: "状态",
      key: "status",
      dataIndex: "status",
      render: (text) => (
        <span className={text === "0" ? "blue" : ""}>
          {text === "0" ? "待处理" : text === "1" ? "已驳回" : "已认证"}
        </span>
      ),
    },
    {
      title: "商业登记证号码",
      key: "conpanyId",
      dataIndex: "conpanyId",
      width: 180,
    },
    {
      title: "账户编号",
      key: "account",
      dataIndex: "account",
    },
    {
      title: "联系人",
      key: "contacts",
      dataIndex: "contacts",
    },
    {
      title: "联系电话",
      key: "phone",
      dataIndex: "phone",
    },
    {
      title: "品类",
      key: "category",
      dataIndex: "category",
    },
    {
      title: "地址",
      key: "address",
      dataIndex: "address",
      width: 100,
      render: (text) => (
        <Popover placement="topLeft" content={text}>
          <span className="ellipsis">{text}</span>
        </Popover>
      ),
    },
    {
      title: "操作",
      key: "x",
      fixed: "right",
      width: 250,
      render: (_, record) => {
        return (
          <div>
            <span style={{ marginRight: "10px" }} onClick={toDetail}>
              详情
            </span>
            {record.status === "0" ? (
              <span
                style={{ marginRight: "10px" }}
                onClick={() => setOut(true)}
              >
                审批
              </span>
            ) : (
              ""
            )}
          </div>
        );
      },
    },
  ];
  return (
    <div className="all-container">
      <Tabs
        style={{ width: "100%" }}
        defaultActiveKey={activeKey}
        onChange={(key) => setActiveKey(key)}
      >
        <TabPane style={{ width: "1140px" }} tab="全部 " key="1">
          <Table
            pagination={false}
            columns={columns}
            dataSource={data}
            rowKey={(data) => data.goodNo}
            scroll={{ x: 1500, y: 380 }}
          />
          <Pagination
            onChange={onShowSizeChange}
            className="customer-page"
            total={pageInfo.totalSize}
          />
        </TabPane>
        <TabPane style={{ width: "1140px" }} tab="已处理" key="2">
          <Table
            pagination={false}
            columns={columns}
            dataSource={data}
            rowKey={(data) => data.goodNo}
            scroll={{ x: 1500, y: 380 }}
          />
          <Pagination
            onChange={onShowSizeChange}
            className="customer-page"
            total={pageInfo.totalSize}
          />
        </TabPane>
        <TabPane style={{ width: "1140px" }} tab="已驳回" key="3">
          <Table
            pagination={false}
            columns={columns}
            dataSource={data}
            rowKey={(data) => data.goodNo}
            scroll={{ x: 1500, y: 380 }}
          />
          <Pagination
            onChange={onShowSizeChange}
            className="customer-page"
            total={pageInfo.totalSize}
          />
        </TabPane>
      </Tabs>
      <Rejection out={out} setOut={setOut}></Rejection>
    </div>
  );
};
export default withRouter(CustomerCertification);
